<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>备忘录编辑</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #F5F5F5;
      color: #333333;
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      flex: 1;
      letter-spacing: 0.5px;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin: 0;
      padding: 0;
      min-height: calc(100vh - 80px);
      border-radius: 0;
      position: relative;
    }

    /* 文本输入区域 */
    .memo-input-area {
      width: 100%;
      min-height: calc(100vh - 80px);
      padding: 25px 25px 25px 45px;
      border: none;
      outline: none;
      font-size: 16px;
      color: #333;
      line-height: 1.8;
      resize: none;
      background-color: white;
      font-family: inherit;
    }

    .memo-input-area::placeholder {
      color: #999;
      font-style: italic;
    }

    .memo-input-area:focus {
      outline: none;
    }

    /* 左侧指示线 */
    .content-container::before {
      content: '';
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #E0E0E0;
      z-index: 1;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .header-title {
        font-size: 18px;
      }

      .memo-input-area {
        padding: 20px 20px 20px 35px;
        font-size: 15px;
      }

      .content-container::before {
        left: 15px;
        top: 0;
        bottom: 0;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <button class="back-btn" id="backBtn">
      ←
    </button>
    <div class="header-title">备忘录编辑</div>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <textarea class="memo-input-area" id="memoInput" placeholder="在此输入备忘录内容..."></textarea>
  </div>

  <script>
    // 返回按钮点击事件
    document.getElementById('backBtn').addEventListener('click', function () {
      // 检查是否有未保存的内容
      const memoInput = document.getElementById('memoInput');
      if (memoInput.value.trim() !== '') {
        if (confirm('您有未保存的内容，确定要离开吗？')) {
          window.location.href = '主页.html';
        }
      } else {
        window.location.href = '主页.html';
      }
    });

    // 自动保存功能
    let saveTimeout;
    document.getElementById('memoInput').addEventListener('input', function () {
      // 清除之前的定时器
      clearTimeout(saveTimeout);

      // 设置新的定时器，3秒后自动保存
      saveTimeout = setTimeout(() => {
        const content = this.value;
        localStorage.setItem('memoContent', content);
        console.log('备忘录已自动保存');
      }, 3000);
    });

    // 页面加载时恢复内容
    document.addEventListener('DOMContentLoaded', function () {
      const savedContent = localStorage.getItem('memoContent');
      if (savedContent) {
        document.getElementById('memoInput').value = savedContent;
      }
    });

    // 页面卸载时保存内容
    window.addEventListener('beforeunload', function () {
      const content = document.getElementById('memoInput').value;
      localStorage.setItem('memoContent', content);
    });
  </script>
</body>

</html>